<template>
  <div class="h-screen flex flex-col justify-center items-center text-jacarta-700 dark:text-white dark:bg-jacarta-900">
    <div class="lg:text-[16rem] sm:text-[10rem] font-bold flex items-center space-x-[3rem]">
      <span class="hour">{{ clock.hour }}</span>
      <span :class="clock.showColon?'lg:h-[8rem] sm:h-[5rem]':'lg:h-[4rem] sm:h-[3rem]'" class="duration-1000 bg-jacarta-600 colon lg:w-[1.5rem] sm:w-[1rem] dark:bg-white bg-jacarta-700 rounded-full"></span>
      <span class="minute">{{ clock.minute }}</span>
    </div>
    <div class="clock-dates flex space-x-[4rem] text-[4rem]">
      <div>
        {{ clock.dates }}
      </div>
      <div>
        星期{{ clock.week }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import "@/assets/fonts/iconfont.css";
import {reactive, onBeforeMount, nextTick} from "vue";

const weekMap = {
  0: "日",
  1: "一",
  2: "二",
  3: "三",
  4: "四",
  5: "五",
  6: "六",
}; //星期map
let timer = null; //计时器
const clock = reactive({
  breath: false, //是否开启冒号呼吸动画
  hour: "00",
  minute: "00",
  second: "00",
  dates: "2020/01/01",
  week: "一",
  showColon: false,
});

// 补零
function fixZero(data:any) {
  return data < 10 ? `0${data}` : data;
}

// 计时器
const counter = () => {
  const now = new Date();
  clock.hour = fixZero(now.getHours());
  clock.minute = fixZero(now.getMinutes());
  clock.second = fixZero(now.getSeconds());
  clock.dates = `${now.getFullYear()}/${fixZero(
      now.getMonth() + 1
  )}/${fixZero(now.getDate())}`;
  clock.week = '';
  if (now.getDay() in weekMap) {
    //@ts-ignore
    clock.week = weekMap[now.getDay()];
  }
  timer = setTimeout(counter, 1000);
};
// 冒号呼吸动画
const breath = () => {
  clock.showColon = !clock.showColon;
  timer = setTimeout(breath, 1000);
};
onBeforeMount(() => {
  // 获取当前时间
  counter();
  // 冒号呼吸动画
  breath();
});
</script>

<style scoped>

</style>